import {ref, onUnmounted} from "vue";


export function useFullScreen() {
    const isFullScreen = ref<boolean>(false);

    /**
     * 切换页面全屏
     */
    async function handleScreenChange() {
        try {
            if (!document.fullscreenElement) {
                await document.documentElement.requestFullscreen();
                isFullScreen.value = true;
            } else {
                await document.exitFullscreen();
                isFullScreen.value = false;
            }
        } catch (error) {
            console.error("Fullscreen operate failed ", error);
        }


        const handleFullscreenChange = () => {
            isFullScreen.value = !!document.fullscreenElement;
        }


        document.addEventListener("fullscreenchange", handleFullscreenChange)

        // 组件卸载时候，移除事件监听器
        onUnmounted(() => {
            document.removeEventListener("fullscreenchange", handleFullscreenChange);
        })
    }

    return { isFullScreen, handleScreenChange }
}